<template>
  <div>
    <div v-show="!isUpload">
      <header>
        <van-nav-bar class="main_header notice_header" :title="title">
          <template #left>
            <span @click="goBack">返回</span>
          </template>
        </van-nav-bar>
      </header>
      <div v-if="isPageLoading" class="page_loading fixed">
        <van-loading size="24px" vertical color="#fff">加载中...</van-loading>
      </div>
      <div class="gl_pb_20">
        <div v-if="registerList.length > 0">
          <div v-for="item in registerList" :key="item.id">
            <div v-if="item.registerTagTypeCode === 'Coach' || item.registerTagTypeCode === 'Leader' || item.registerTagTypeCode === 'Athlete' || item.registerTagTypeCode === 'HeadQuarters'" class="gl_mb_20 gl_pt_15">
              <van-row class="gl_px_20" type="flex" justify="space-between">
                <van-col class="title" span="10">{{ item.registerTagType.name }}身份认证</van-col>
                <van-col class="gl_pr_10" align="right" span="6"><van-button class="size_bu" icon="plus" plain size="small" type="info" round @click="add(item.id)" /></van-col>
              </van-row>
              <div v-if="item.registerTagDetails.length < 1">
                <peopleList :people-data="addInput" :tag-id="item.id" @edit="edit" @tag="tag" />
              </div>
              <div v-for="(ktem, kndex) in item.registerTagDetails" v-else :key="kndex">
                <peopleList :people-data="ktem" :tag-id="item.id" @edit="edit" @tag="tag" />
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <van-empty description="暂无数据" />
        </div>
      </div>
    </div>
    <div v-show="isUpload">
      <submitForm :upload-form="formData" :tag-id="tagId" />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import peopleList from './peopleList';
import submitForm from './submitForm';
import {
  api_GET_EventsManagementRegisterTagRegisterTagListRegisterId
} from '@/extend/api/gameswaggerApi/app.js';
import {
  SiSTKWEventsManagementAddRegisterTagDetailInput
} from '@/lib/form/game/swaggerForm';

export default {
  name: 'Authentication',
  components: {
    peopleList,
    submitForm
  },
  data() {
    return {
      title: '职业中心',
      registerId: '',
      gameId: '',
      registerList: [],
      isUpload: false,
      addInput: new SiSTKWEventsManagementAddRegisterTagDetailInput(),
      isPageLoading: false,
      tagId: '',
      formData: {}
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    'currentUserType': {
      handler: function(val) {
        if (val) {
          this.registerId = val.registerId;
          this.getRegisterList();
        }
      },
      deep: true,
      immediate: true // 初始加载
    }
  },
  created() {
    this.gameId = this.$route.params.id;
  },
  methods: {
    goBack() {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/`
      });
    },
    // 获取角色列表
    getRegisterList() {
      this.isPageLoading = true;
      api_GET_EventsManagementRegisterTagRegisterTagListRegisterId(this.registerId).then(res => {
        this.isPageLoading = false;
        this.registerList = res || [];
        // this.registerList = this.registerList.filter(item => {
        //   return item.registerTagTypeCode !== 'Athlete';
        // });
      }).catch(() => {
        this.isPageLoading = false;
      });
    },
    add(id) {
      this.tagId = id;
      this.formData = JSON.parse(JSON.stringify(this.addInput));
      this.isUpload = true;
    },
    tag(val) {
      this.tagId = val;
    },
    edit(val) {
      this.formData = JSON.parse(JSON.stringify(val));
      this.isUpload = true;
    },
    back() {
      this.$set(this.formData, 'paperImage', '@/assets/images/nodata.png');
      this.isUpload = false;
    }
  }
};
</script>
<style scoped>
.title {
  line-height: 26px;
  color: #333333;
  font-size: 14px;
  font-weight: 600;
}
.size_bu {
  width: 24px;
  height: 24px;
}
</style>
